<template>
    <div class="count">
        <div class="topTit f f-a-c f-j-b">
            <div class="left f f-a-c">
                <img src="/src/status/img/logo.png" class="logo" alt="">
                <span>H.S.国际问题研究平台</span>
            </div>
            <div class="right">
                <img @click="setting" src="/src/status/img/geng.png" class="myStat" alt="">
            </div>
        </div>
        <div class="body">
            <!-- 这个是头部的航空航天 -->
            <div class="top f f-a-c f-j-b">
                <div @click="showBottom = true" class="lef f f-a-c">
                    <div class="titleName">{{ title.name }} </div> <img src="/src/status/img/1.png" class="xiajian" alt="">
                </div>
                <img src="/src/status/img/2.png" class="shecl" @click="shecl" alt="">
            </div>
            <!-- 下面的列表 -->
            <div class="list">
                <van-list offset="10" @load="onLoad">
                    <div v-for="(item, index) in listsHang" class="listItem" :key="index">
                        <!-- <div class="topt">The "thousand eyes Sky Pearl" opened to the sun - the world's largest synthetic
                            aperture radio telescope was completed</div> -->
                        <div class="title">{{ item.title }}</div>
                        <div class="time">{{ item.date }} {{ item.time }}</div>
                        <div class="count" v-html="item.content">
                        </div>
                        <!-- 这个是下面的查看详情 -->
                        <div class="detile f f-a-c f-j-b">
                            <div @click="viewDetails(item)" class="viewDetails">查看详情</div>
                            <!-- <div class="detle f f-a-c"><img src="/src/status/img/3.png" class="detImg" alt="">删除</div> -->
                        </div>
                    </div>
                    <div v-show="listsHang.length == 0" class="zanwu">
                        <img src="/src/status/zanwu.png" class="zanwuImg" alt="">
                        <div class="zanwuTit">暂无数据</div>
                        <div class="zanwuCon">请在下方或右上侧输入对应关键字搜索</div>
                    </div>
                </van-list>
                <!-- 这个是搜索 -->
                <div class="search">
                    <input type="text" v-model="valu" placeholder="请输入关键词搜索" class="inp" name="" id="">
                    <div @click="chachkFn" class="sousuoImg f f-a-c f-j-c"><img src="/src/status/img/4.png" class="schImg"
                            alt=""></div>
                </div>
            </div>
        </div>
        <!-- 下面的弹出层 -->
        <van-popup v-model:show="showBottom" round position="bottom" :style="{ height: '50%', paddingBottom: '50px' }">
            <div class="listHuati">
                <van-list offset="10" @load="onLoadHuati">
                    <div v-for="(item, index) in list" :key="index" @click="itemQie(item)" class="listName f f-a-c f-j-b"
                        :class="{ active: item.status == 1 }">
                        <div class="leftItem  f f-a-c">
                            <img src="/src/status/img/6.png" v-if="item.status == 0" class="jinghao" alt="">
                            <img src="/src/status/img/5.png" v-else class="jinghao" alt="">
                            <div class="nameTit">
                                {{ item.name }}

                            </div>
                        </div>
                        <div class="rigItem">
                            <img @click.stop="detle(item)" src="/src/status/img/3.png" class="gengduo" alt="">
                        </div>
                    </div>
                </van-list>
                <div @click="CreateTopic" class="btn">创建话题</div>
            </div>
        </van-popup>
        <van-popup v-model:show="showFrom" round position="bottom" :style="{ height: '80%' }">
            <div @click="colsnBox" class="from">
                <div class="top">
                    <div class="gai f f-a-c"> 概念
                        <img src="/src/status/img/gai.png" class="gaiimg" alt="">
                    </div>
                    <input type="text" @input="input1" v-model="gaiValue.name" placeholder="请输入概念" class="gaiInp" name=""
                        id="">
                    <div v-show="showPicker1" class="botKuang">
                        <div v-for="(item, index) in columns1" :key="index" @click.stop="onConfirm1(item)" class="botItem">
                            {{
                                item.name
                            }}</div>
                    </div>
                </div>
                <div class="top">
                    <div class="gai f f-a-c"> 类别
                        <img src="/src/status/img/gai.png" class="gaiimg" alt="">
                    </div>
                    <input @input="input2" type="text" v-model="categoryValue.name" placeholder="请输入类别" class="gaiInp"
                        name="" id="">
                    <div v-show="showPicker2" class="botKuang">
                        <div v-for="(item, index) in columns2" :key="index" @click.stop="onConfirm2(item)" class="botItem">
                            {{
                                item.name
                            }}</div>
                    </div>
                </div>
                <div class="top">
                    <div class="gai f f-a-c"> 地点
                        <img src="/src/status/img/gai.png" class="gaiimg" alt="">
                    </div>
                    <input @input="input3" type="text" v-model="addressValue.name" placeholder="请输入地点" class="gaiInp"
                        name="" id="">
                    <div v-show="showPicker3" class="botKuang">
                        <div v-for="(item, index) in columns3" :key="index" @click.stop="onConfirm3(item)" class="botItem">
                            {{
                                item.name
                            }}</div>
                    </div>
                </div>
                <!-- 时间范围 -->
                <div class="top">
                    <div class="gai f f-a-c"> 时间范围</div>
                    <div class="f f-a-c f-j-c">
                        <input type="text" v-model="statTimeValue" @click="statTime(1)" placeholder="请选择开始时间"
                            class="gaiInp1" name="" id="">
                        <div class="xian">——</div>
                        <input type="text" v-model="endTimeValue" @click="statTime(2)" placeholder="请选择结束时间" class="gaiInp1"
                            name="" id="">
                    </div>
                </div>
                <!-- 排序 -->
                <div class="top">
                    <div class="gai f f-a-c"> 排序
                    </div>
                    <div class="sort f f-a-c f-j-b">
                        <div class="lefs" @click="setels(1)" :class="{ actLef: ind == 1 }">时间</div>
                        <div class="lefs" @click="setels(2)" :class="{ actLef: ind == 2 }">相关</div>
                    </div>
                </div>
            </div>
            <div class="botBtn f f-a-c f-j-b">
                <div @click="reset" class="reset">重置</div>
                <div @click="schec" class="schec">搜索</div>
            </div>
        </van-popup>
        <!-- /选择日期 -->
        <van-popup v-model:show="showTime" round position="bottom" :style="{ height: '40%' }">
            <van-date-picker @confirm="confirmTime" v-model="currentDate" title="选择日期" :min-date="minDate"
                :max-date="maxDate" />
        </van-popup>
        <div v-if="porps" class="">
            <detilsPorop @detilStua="detilStua" :title="title" @caijiSeting="caijiSeting" :obj="objItem"></detilsPorop>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, onBeforeUnmount } from 'vue'
// import { showConfirmDialog } from 'vant';
import { Concepts, GetCategories, GetLocations, GetArticleList, MyTopics, TopicsList } from '../../api/index';
import router from '../../router';
import detilsPorop from '../../components/detilsPorop/index.vue'
import { showLoadingToast, closeToast, showToast, showConfirmDialog } from 'vant'
let ind = ref(1)
let valu = ref('')
let title = ref({
    name: '请选择'
})
let pageNum = ref(0)//这个是当前页数9
let pageSize = ref(1)//每页展示的条数
let time = ref(null)
let list = ref([{ status: 0, id: 2 }, { status: 1, id: 3 }, { status: 0, id: 4 }, { status: 0, id: 5 }, { status: 0, id: 6 }, { status: 0, id: 6 }, { status: 0, id: 6 }, { status: 0, id: 6 }, { status: 0, id: 6 }])
let showBottom = ref(false)
let showFrom = ref(false)
let showPicker1 = ref(false)//概念show
let showPicker2 = ref(false)//概念show
let showPicker3 = ref(false)//概念show
let showTime = ref(false)//时间
let porps = ref(false)//组件
let listsHang = ref([])//时间
let obj = ref({})//这个是搜索关键字
let objItem = ref({})//这个是搜索关键字
let huatiTime = ref(null)//这个是搜索关键字
const currentDate = ref(['2021', '01', '01']);
let gaiValue = ref({
    name: '',
    uri: ''
})//输入概念
let categoryValue = ref({
    name: '',
    uri: ''
})//添加类别
let addressValue = ref({
    name: '',
    wiki_uri: ''
})//添加类别
let statTimeValue = ref('')//开始时间
let endTimeValue = ref('')//结束时间
let num = ref(1)//时间status
let temls1 = ref(null)//第一个概念延时器
let temls2 = ref(null)//第二个概念延时器
let temls3 = ref(null)//第三个概念延时器

let columns1 = ref([
    { name: '杭州', uri: 'Hangzhou' },
    { name: '宁波', uri: 'Ningbo' },
    { name: '温州', uri: 'Wenzhou' },
    { name: '绍兴', uri: 'Shaoxing' },
    { name: '湖州', uri: 'Huzhou' },
]);
let columns2 = ref([
    { name: '杭州', uri: 'Hangzhou' },
    { name: '宁波', uri: 'Ningbo' },
    { name: '温州', uri: 'Wenzhou' },
    { name: '绍兴', uri: 'Shaoxing' },
    { name: '湖州', uri: 'Huzhou' },
]);
let columns3 = ref([
    { name: '杭州', uri: 'Hangzhou' },
    { name: '宁波', uri: 'Ningbo' },
    { name: '温州', uri: 'Wenzhou' },
    { name: '绍兴', uri: 'Shaoxing' },
    { name: '湖州', uri: 'Huzhou' },
]);
// -----------------------------------------------------------------------------------

// 返回首页
onMounted(() => {
    // 搜索条件-----------------------------
    let n = JSON.parse(localStorage.getItem('objObj'))
    gaiValue.value = n.gaiValue
    categoryValue.value = n.categoryValue
    addressValue.value = n.addressValue
    ind.value = n.ind
    // ================================
    pageNum.value = 0
    console.log(router);
    obj.value = JSON.parse(localStorage.getItem('obj'))
    list.value = []
    TopicList()
    // list.value[0].status = 1
    setTimeout(() => {
        title.value.name = list.value[0].name
    }, 1000);
})
// 
const caijiSeting = () => {
    objItem.value.is_collect = 1
}
// 这个是话题列表
const TopicList = async () => {
    let n = await MyTopics()
    let lists = []
    n.content.list.forEach(item => {
        lists.push({
            ...item,
            status: 0
        })
    })
    list.value = [...list.value, ...lists]
    list.value[0].status = 1
    title.value = list.value[0]
}
// 话题切换
const itemQie = (item) => {
    list.value.forEach(item => {
        item.status = 0
    })
    item.status = 1
    showBottom.value = false
    title.value = item
}
router.beforeEach((to, from, next) => {
    if (localStorage.getItem('stuta')) {
        showToast('请点击右上角X');
        next(false)
    } else {
        next()
    }
})
// onBeforeUnmount(() => {
//     console.log(router.beforeEach, 121121);
//     router.beforeEach((to, from, next) => {
//         next(false)
//     })
// })
// 第一个概念input框
const input1 = (e) => {
    if (!e.data) {
        showPicker1.value = false
        return
    }
    clearTimeout(temls1.value)
    temls1.value = setTimeout(async () => {
        const toast = showLoadingToast({
            duration: 0,
            forbidClick: true,
            message: '加载中',
        });
        let n = await Concepts({ searchKey: gaiValue.value.name })
        closeToast();
        columns1.value = n.content.list
        showPicker1.value = true
    }, 1000);

}
// 第二个概念input框
const input2 = (e) => {
    if (!e.data) {
        showPicker2.value = false
        return
    }
    clearTimeout(temls2.value)
    temls2.value = setTimeout(async () => {
        const toast = showLoadingToast({
            duration: 0,
            forbidClick: true,
            message: '加载中',
        });
        let n = await GetCategories({ searchKey: categoryValue.value.name })
        closeToast();
        columns2.value = n.content.list
        showPicker2.value = true
    }, 1000);

}
// 第三个概念input框
const input3 = (e) => {

    if (!e.data) {
        showPicker3.value = false
        return
    }
    clearTimeout(temls3.value)
    temls3.value = setTimeout(async () => {
        const toast = showLoadingToast({
            duration: 0,
            forbidClick: true,
            message: '加载中',
        });
        // console.log(addressValue.value.name, '123');
        let n = await GetLocations({ searchKey: addressValue.value.name })
        closeToast();
        columns3.value = n.content.list
        showPicker3.value = true
    }, 1000);

}
// ------------------------------------时间----------------------------------------
// 这个是点击其他关闭盒子
const colsnBox = () => {
    showPicker3.value = false
    showPicker1.value = false
    showPicker2.value = false
}
// 这个是点击确定
const onConfirm1 = (item) => {
    gaiValue.value = item
    showPicker1.value = false
}
// 这个是点击确定
const onConfirm2 = (item) => {
    categoryValue.value = item
    showPicker2.value = false
}
// 这个是点击确定
const onConfirm3 = (item) => {
    addressValue.value = item
    showPicker3.value = false
}
// ------------------------------------时间----------------------------------------

const minDate = ref(new Date(1960, 1, 1))
const maxDate = ref(new Date())
// 时间选择
const confirmTime = (e) => {
    // console.log(e, '123456');
    if (num.value == 1) {
        statTimeValue.value = `${e.selectedValues[0]}-${e.selectedValues[1]}-${e.selectedValues[2]}`
    } else {
        endTimeValue.value = `${e.selectedValues[0]}-${e.selectedValues[1]}-${e.selectedValues[2]}`
    }
    showTime.value = false
    console.log(statTimeValue.value, endTimeValue.value);
}

// 点击跳转创建话题
const CreateTopic = () => {
    router.push('/DataSearch')
}
// 子传父
const detilStua = () => {
    localStorage.removeItem('stuta')
    porps.value = false
}
// 点击查看 详情
const viewDetails = (item) => {
    localStorage.setItem('stuta', 1)
    objItem.value = item
    porps.value = true
    // router.push({
    //     path: '/EventDetails',
    //     query: {
    //         id: 2,
    //         num: 2
    //     }
    // })
}

// 点击搜索=================================================================================
const chachkFn = async () => {
    const toast = showLoadingToast({
        duration: 0,
        forbidClick: true,
        message: '加载中',
    });
    console.log(valu.value, '100000');
    // return
    let n = await GetArticleList({
        keyword: valu.value.trim(),
        pageNum: pageNum.value,
        pageSize: pageSize.value,
        topics_id: title.value.id,
        ...obj.value
    })
    if (!n) {
        closeToast()
    }
    closeToast()
    listsHang.value = [...listsHang.value, ...n.content.list || []]

}
// 点击重置
const reset = () => {
    statTimeValue.value = ''
    endTimeValue.value = ''
    categoryValue.value.name = ''
    gaiValue.value.name = ''
    addressValue.value.name = ''
    ind.value = 1
    localStorage.removeItem('obj')
}
// /弹出层点击搜索
const schec = () => {
    pageNum.value = 1
    listsHang.value = []
    let objs = {
        categoryUri: categoryValue.value.uri,
        locationsUri: addressValue.value.wiki_uri,
        conceptUri: gaiValue.value.uri,
        dateStart: statTimeValue.value,
        dateEnd: endTimeValue.value,
        sortBy: ind.value == 1 ? 'date' : 'rel'
    }
    obj.value = objs
    localStorage.setItem('obj', JSON.stringify(objs))
    chachkFn()
    showFrom.value = false
    let objObj = {
        categoryValue: categoryValue.value,
        addressValue: addressValue.value,
        gaiValue: gaiValue.value,
        ind: ind.value
    }
    localStorage.setItem('objObj', JSON.stringify(objObj))
}
// 点击搜索
const shecl = () => {
    // 获取本地存储的搜索条件
    // let obj = JSON.parse(localStorage.getItem('obj'))
    // gaiValue.value.name = obj.conceptUri
    // categoryValue.value.name = obj.categoryUri
    // addressValue.value = obj.locationsUri
    // statTimeValue.value = obj.dateStart
    // endTimeValue.value = obj.dateEnd
    showFrom.value = true
}
// 这个是选择
const setels = (num) => {
    ind.value = num
    console.log(ind, '123456789');
}
// 点击时间范围
const statTime = (nums) => {
    // 这个是开始时间
    num.value = nums
    console.log(nums, '11111');
    showTime.value = true
}
// 这个是话题删除
const detle = (item) => {
    showBottom.value = true
    showConfirmDialog({
        title: '标题',
        message:
            '如果删除，采集里的相应文章也会随之删除，确认要删除话题吗？',
    }).then(async () => {
        console.log('123');
        let n = await TopicsList({
            topics_id: item.id
        })
        showToast(n.msg)
        list.value = []
        TopicList()
        showBottom.value = false
        // on confirm
    }).catch(() => {
        console.log('12789');
        // on cancel
    });
}
const setting = () => {
    router.push('/IndexMove')
}
// 这个是当list滑到最下面
const onLoad = () => {
    clearTimeout(time)
    time = setTimeout(() => {
        pageNum.value++
        chachkFn()
    }, 200)
}
// 话题滑到最下面的时候
const onLoadHuati = () => {
    console.log('00000');
    // clearTimeout(huatiTime.value)
    // huatiTime.value = setTimeout(() => {
    //     TopicList()
    // }, 300);
}
</script>
<style lang="scss" scoped>
@function pxfn($px) {
    @return calc($px / 3.75) * 1vw;
}

.botBtn {
    padding: 0 pxfn(15);
    position: absolute;
    bottom: pxfn(20);
    width: 100%;

    .reset {
        width: 25%;
        height: pxfn(44);
        line-height: pxfn(44);
        background: #ffffff;
        border: pxfn(1) solid #e8eaef;
        border-radius: pxfn(6);
        text-align: center;
    }

    .schec {
        width: 72%;
        height: pxfn(44);
        line-height: pxfn(44);
        background: #32bbea;
        border-radius: pxfn(6);
        font-size: pxfn(14);
        font-family: PingFang SC, PingFang SC-500;
        font-weight: 500;
        text-align: center;
        color: #ffffff;
    }
}

.from {
    padding: pxfn(15);

    .top {
        margin-bottom: pxfn(15);
        position: relative;

        .botKuang {
            // padding: pxfn(15);
            border-radius: 0 0 pxfn(5) pxfn(5);
            position: absolute;
            width: 100%;
            z-index: 9999999999999;
            height: pxfn(200);
            background-color: #fff;
            bottom: pxfn(-200);
            overflow-y: auto;
            box-shadow:
                0px 2px 5px #888888,
                0px 0px 0px #cccccc;

            .botItem {
                width: 100%;
                overflow-x: auto;
                // background-color: pink;
                padding: pxfn(10);
            }

            .botItem:hover {
                background-color: rgb(235, 223, 225);
            }
        }

        .sort {
            height: pxfn(36);

            .lefs {
                width: pxfn(167);
                height: pxfn(36);
                line-height: pxfn(36);
                border: pxfn(1) solid #e8eaef;
                border-radius: pxfn(6);
                text-align: center;
            }

            .actLef {
                border: pxfn(1) solid #32BBEA;
                color: #32BBEA;
            }
        }

        .gaiInp {
            width: 100%;
            height: pxfn(36);
            border: pxfn(1) solid #e8eaef;
            border-radius: pxfn(6);
            padding-left: pxfn(10);
        }

        .xian {
            margin: 0 pxfn(5);
            color: #C2C5CC;
        }

        .gaiInp1 {
            width: 45%;
            height: pxfn(36);
            border: pxfn(1) solid #e8eaef;
            border-radius: pxfn(6);
            padding-left: pxfn(10);
        }




        .gai {
            font-size: pxfn(12);
            font-family: PingFang SC, PingFang SC-400;
            font-weight: 400;
            text-align: LEFT;
            color: #4e5769;
            margin-bottom: pxfn(10);
        }

        .gaiimg {
            width: pxfn(12);
            height: pxfn(12);
            margin-left: pxfn(4);
        }
    }
}

.gaiInp::placeholder {
    color: #C2C5CC !important;
}

.listName {
    width: 100%;
    height: pxfn(48);
    margin-top: pxfn(10);
    // background-color: #f0fafd;
    border-radius: pxfn(10);
    padding: pxfn(10);
    box-sizing: border-box;

    .gengduo {
        width: pxfn(16);
        height: pxfn(16);
        box-sizing: border-box;
    }


    .leftItem {
        font-size: pxfn(14);
        font-family: PingFang SC, PingFang SC-500;
        font-weight: 400;
        text-align: LEFT;
        width: 90%;
        // color: #1d2129;

        box-sizing: border-box;

        .jinghao {
            width: pxfn(18);
            height: pxfn(18);
            font-size: pxfn(14);
            font-family: PingFang SC, PingFang SC-500;
            font-weight: 600;
            text-align: LEFT;
            color: #1d2129;
            box-sizing: border-box;
            margin-right: pxfn(10);
        }
    }

}

.nameTit {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    // max-width: 90%;
}

.active {
    color: #32bbea !important;
    background-color: #f0fafd;
}

.listHuati {
    padding: 0 pxfn(20);
    position: relative;
    padding-bottom: pxfn(70);
    height: pxfn(300);
    overflow-y: auto;

    .btn {
        position: fixed;
        bottom: pxfn(0);
        width: 90%;
        height: pxfn(42);
        line-height: pxfn(44);
        background: #fff;
        border: pxfn(1) solid #32bbea;
        border-radius: pxfn(8);
        left: 50%;
        transform: translateX(-50%);
        font-size: pxfn(14);
        font-family: PingFang SC, PingFang SC-500;
        font-weight: 500;
        text-align: center;
        color: #32bbea;
    }
}

.search {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    height: pxfn(52);
    background: #ffffff;
    border-radius: pxfn(24);

    .sousuoImg {
        position: absolute;
        width: pxfn(72);
        height: pxfn(36);
        background: #32bbea;
        border-radius: pxfn(18);
        top: 50%;
        transform: translateY(-50%);
        right: pxfn(15);

        .schImg {
            width: 16px;
            height: 16px;
        }
    }

    .inp {
        border: none;
        width: 100%;
        height: 100%;
        border-radius: pxfn(24);
        padding-left: pxfn(15);
    }
}

.list {
    position: relative;
    height: calc(100vh - pxfn(115));
    width: 100%;
    // background-color: #fff;
    overflow-y: auto;
    padding-bottom: pxfn(50);

    .listItem {
        padding: pxfn(10);
        border-radius: pxfn(8);
        background-color: #fff;
        margin-bottom: pxfn(10);

        .detile {
            margin-top: pxfn(10);

            .viewDetails {
                font-size: pxfn(14);
                font-family: PingFang SC, PingFang SC-400;
                font-weight: 400;
                text-align: LEFT;
                color: #32bbea;
            }

            .detle {
                font-size: pxfn(14);
                font-family: PingFang SC, PingFang SC-400;
                font-weight: 400;
                text-align: LEFT;
                color: #868d9c;


                .detImg {
                    width: pxfn(18);
                    height: pxfn(18);
                    margin-right: pxfn(4);
                }
            }
        }

        .count {
            font-size: pxfn(14);
            font-family: PingFang SC, PingFang SC-400;
            font-weight: 400;
            text-align: LEFT;
            color: #4e5769;
            width: 100%;
            height: 100%;
            padding-top: pxfn(5);
            /* 原样打印且自动换行 */
            white-space: pre-wrap;

            /* 在父元素上设置该属性，子代元素能排列在同一水平上 */
            display: -webkit-box;

            /* 超出几行显示 */
            -webkit-line-clamp: 4;

            /* 子元素垂直排列 */
            -webkit-box-orient: vertical;

            /* 文本溢出部分显示三个点 */
            text-overflow: ellipsis;

            /* 超出隐藏 */
            overflow: hidden
        }

        .time {
            font-size: pxfn(14);
            font-family: PingFang SC, PingFang SC-400;
            font-weight: 400;
            text-align: LEFT;
            color: #868d9c;
            margin: pxfn(10) 0;
        }

        .topt {
            font-size: pxfn(16);
            font-family: PingFang SC, PingFang SC-500;
            font-weight: 600;
            text-align: LEFT;
            color: #1d2129;
        }

        .title {
            font-size: pxfn(16);
            font-family: PingFang SC, PingFang SC-500;
            font-weight: 600;
            text-align: LEFT;
            color: #1d2129;
            margin-top: pxfn(5);
            /* 原样打印且自动换行 */
            white-space: pre-wrap;
            /* 在父元素上设置该属性，子代元素能排列在同一水平上 */
            display: -webkit-box;
            /* 超出几行显示 */
            -webkit-line-clamp: 4;
            /* 子元素垂直排列 */
            -webkit-box-orient: vertical;
            /* 文本溢出部分显示三个点 */
            text-overflow: ellipsis;
            /* 超出隐藏 */
            overflow: hidden
        }
    }
}

.body {
    height: calc(100vh - pxfn(48));
    background-color: #edf3fa;
    padding: pxfn(15);
    padding-top: 0;
    overflow-y: auto;

    .top {
        width: 100%;
        height: pxfn(50);

        .shecl {
            width: pxfn(22);
            height: pxfn(22);
        }

        .lef {
            max-width: 50%;
            font-size: pxfn(18);
            font-family: PingFang SC, PingFang SC-500;
            font-weight: 600;
            text-align: LEFT;
            color: #1d2129;

            .xiajian {
                width: pxfn(15);
                height: pxfn(15);
                margin-left: pxfn(10);
            }
        }
    }
}

.titleName {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.count {
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    padding-top: pxfn(50);
}

.topTit {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: pxfn(48);
    border: 1px solid #edf3fa;
    padding: pxfn(15);
    z-index: 1;
    font-size: pxfn(14);
    font-weight: 600;

    .logo {
        width: pxfn(27);
        height: pxfn(24);
        margin-right: pxfn(10);
    }

    .myStat {
        width: pxfn(24);
        height: pxfn(24);
    }
}

.zanwu {
    width: 100%;
    height: pxfn(300);
    background: #ffffff;
    border-radius: 12px;
    margin-top: pxfn(50);

    .zanwuImg {
        width: pxfn(130);
        height: pxfn(130);
        margin-left: 50%;
        transform: translateX(-60%);
        margin-top: 10%;
    }

    .zanwuTit {
        font-size: pxfn(16);
        font-family: PingFang SC, PingFang SC-500;
        font-weight: 600;
        text-align: center;
        color: #1d2129;
        margin-top: pxfn(10);
    }

    .zanwuCon {
        font-size: pxfn(14);
        font-family: PingFang SC, PingFang SC-400;
        font-weight: 400;
        text-align: center;
        color: #868d9c;
        margin-top: pxfn(10);
    }
}
</style>